import React from 'react';
import { Typography, Row, Col, Divider, Table } from 'antd';
import styles from './index.module.scss'

const { Title, Text } = Typography;

const billData = {
    billNumber: 'S20240808102050001',
    billDate: '2024-08-08',
    billAmount: '$33.19',
    ec2IP: '2024-08-08',
    summary: '33.19',
    items: [
        { name:'bill item', item: 'EC2', duration: '150min', price: '$11.2' },
        { name:'bill item', item: 'EC2',duration: '150min', price: '$11.2' },
        { name:'bill item', item: 'EC2',duration: '150min', price: '$11.2' },
        { name:'bill item', item: 'EC2',duration: '150min', price: '$11.2' }
    ]
};

const columns = [
    {
        title: 'Bill Item',
        dataIndex: 'item',
        key: 'item',
    },
    {
        title: 'Duration',
        dataIndex: 'duration',
        key: 'duration',
    },
    {
        title: 'Price',
        dataIndex: 'price',
        key: 'price',
    }
];

export default (props) => {
    return (
        <div className='page-container'>
            <div className={styles.content}>
                <div className={styles.billingdetailscontainer}>
                    <div className={styles.billingdetailsheader}>
                        <Text className={styles.text}>Please refer to the billing details</Text>
                    </div>

                    <div className={styles.billingcontent}>
                        <Row justify="space-between" style={{ width: '80%', margin: '0 auto' }}>
                            <Col>
                                <Title level={4} className={styles.title}>Bill Overview:</Title>
                            </Col>
                            <Col>
                                <Text className={styles.billingsummary}>Bill Summary (USD):</Text> <Text className={styles.summaryvalue}>{billData.summary}</Text>
                            </Col>
                        </Row>
                        <div className={styles.topBox}>
                            <Row style={{ marginBottom: '16px' }}>
                                <Col span={12}>
                                    <Text className={styles.lableText}>Bill Number:</Text> <Text strong>{billData.billNumber}</Text>
                                </Col>
                                <Col span={12} style={{ textAlign: 'right' }}>
                                    <Text className={styles.lableText}>Bill Amount:</Text> <Text strong>{billData.billAmount}</Text>
                                </Col>
                            </Row>
                            <Row style={{ marginBottom: '16px' }}>
                                <Col span={12}>
                                    <Text className={styles.lableText}>Bill date：:</Text> <Text strong>{billData.billDate}</Text>
                                </Col>
                                <Col span={12} style={{ textAlign: 'right' }}>
                                    <Text className={styles.lableText}>EC2 IP:</Text> <Text strong>{billData.ec2IP}</Text>
                                </Col>
                            </Row>

                        </div>
                        <Divider dashed />
                        <div className={styles.bottomBox}>
                            {billData.items.map((item, index) => (
                                <Row key={index} className={styles.rowBox}>
                                    <Col span={8} style={{textAlign: 'center'}}>
                                        <Text><span style={{color:'#707373',fontSize:'12px',marginRight:'5px'}}>{item.name}:</span> {item.item}</Text>
                                    </Col>
                                    <Col span={8} style={{textAlign: 'center'}}>
                                        <Text>{item.duration}</Text>
                                    </Col>
                                    <Col span={8} style={{textAlign: 'center'}}>
                                        <Text>{item.price}</Text>
                                    </Col>
                                </Row>
                            ))}
                        </div>
                    </div>

                </div>

            </div>
        </div>
    );
};
